<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册</title>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body ng-app="myapp">


	<div class="container" ng-controller="myCtrl">
	<form name="form" novalidate="novalidate">
		<div class="row clearfix">
			<div class="col-md-4 column"></div>
			<div class="col-md-4 column">
			
			<div class="page-header" style="width:100%;text-align:center;">
					<h1>
						注册
					</h1>
				</div>
			
			
			</div>
			<div class="col-md-4 column"></div>
		</div>
		<div class="row clearfix">
			<div class="col-md-4 column"></div>
			<div class="col-md-4 column">
				<div class="row clearfix">
					<div class="col-md-12 column">
						<label for="name">用户名</label>*
					<input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名" ng-model="username" required>
					<span style="color:red" ng-show="form.username.$dirty && form.username.$invalid">
                    <span ng-show="form.username.$error.required">用户名为必填项。</span></span>
                    <span class="glyphicon glyphicon-ok form-control-feedback" ng-show="form.username.$dirty && form.username.$valid"></span>
                    
					</div>
				</div>
				<div class="row clearfix">
					<div class="col-md-12 column">
					
						<label for="name">密码</label>*
					<input type="password" class="form-control" name="password" id="pwd1" placeholder="请输入密码" ng-model="pwd1" ng-minlength="6" ng-maxlength="32" required>
					<span style="color:red" ng-show="form.password.$dirty && form.password.$invalid">
                     <span ng-show="form.password.$error.required">密码是必填项。</span>
                     <span ng-show="form.password.$invalid">密码格式不正确必须6-32位。</span>
                     </span>
                      <span class="glyphicon glyphicon-ok form-control-feedback"
                              ng-show="form.password.$dirty && form.password.$valid "></span>
					
					</div>
				</div>
				<div class="row clearfix">
					<div class="col-md-12 column">
					<label for="name">再次输入密码</label>*
					<input type="password" class="form-control" id="pwd2" name="password2" placeholder="请再次输入密码" ng-model="pwd2" ng-minlength="6" ng-maxlength="32" required>
					<span style="color:red" ng-show="form.password2.$dirty && form.password2.$invalid">
                     <span ng-show="form.password2.$error.required">密码是必填项。</span>
                     <span ng-show="form.password2.$invalid">密码格式不正确必须6-32位。</span>
                     </span>
					 <div ng-if="pwd1!=pwd2">
                     <span style="color:red">两次密码不一致</span>
                    </div>
                     <span class="glyphicon glyphicon-ok form-control-feedback"
                              ng-show="form.password2.$dirty && form.password2.$valid && pwd1==pwd2"></span>
					</div>
				</div>
				<div class="row clearfix">
					<div class="col-md-12 column">
					
					<label for="name">邮箱</label>*
					<input type="email" class="form-control" id="email" name="emails" placeholder="请输入邮箱" ng-model="email" required>
					 <span style="color:red" ng-show="form.emails.$dirty && form.emails.$invalid">
                     <span ng-show="form.emails.$error.required">邮箱是必填项。</span>
                     <span ng-show="form.emails.$error.email">非法的邮箱。</span>
                     </span>
                     <span class="glyphicon glyphicon-ok form-control-feedback"
                              ng-show="form.emails.$dirty && form.emails.$valid"></span>
                     
					</div>
				</div>
				<div class="row clearfix">
					<div class="col-md-12 column">
					
					<label for="name">手机号</label>*
					<input type="number" class="form-control" name="phonenumber" ng-pattern="/^1[3|5|7|8][0-9]{9}$/" id="phonenumber" placeholder="请输入手机号" ng-model="phonenumber" required >
					<span style="color:red" ng-show="form.phonenumber.$dirty && form.phonenumber.$invalid">
                     <span ng-show="form.phonenumber.$error.required">手机号是必填项。</span>
                     <span ng-show="form.phonenumber.$error.pattern">手机号格式不正确。</span>
                     </span>
					 <span class="glyphicon glyphicon-ok form-control-feedback"
                              ng-show="form.phonenumber.$dirty && form.phonenumber.$valid"></span>
					
					
					</div>
				</div>
				已有账号?<a href="/test/login.html">&nbsp&nbsp前往登录</a>
				<div class="row clearfix">
					<div class="col-md-12 column">
					
					<button type="button" class="btn btn-info" id="rstbut" ng-disabled="(!form.$valid)||(!(pwd1==pwd2))" ng-click="onClickregister()">注册</button>
					<small style="float:right;">*为必填项</small>
					</div>
				</div>
			</div>
            
            
			
			<div class="col-md-4 column"></div>
		</div>
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">抱歉</h4>
            </div>
             <div class="modal-body"><label>{{msg}}</label></div>
            <div class="modal-footer">
                <button type="button"  class="btn btn-default" data-dismiss="modal">关闭</button>
                
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
</form>
	</div>

<script type="text/javascript" src="/test/js/register.js"></script>
<script type="text/javascript" src="/test/js/service/userService.js"></script>
</body>
</html>